<template>
	<view>
		<div class="top">
			<div class="xxxg">	
				<!-- 卡片开始啦 -->
				<uni-card class="xxxg-card" title="">
				<!-- 模块开始 -->
					<div class="wdyhq-yhqmk">
						<div class="wdyhq-yhqnr">
							<div class="w-y-top">
								<div class="w-y-top-right">
									<div class="w-y-t-r-l">￥</div>
									<div class="w-y-t-r-r">20</div>
								</div>
								
								<div class="w-y-top-left">
									<div class="w-y-t-l-u">满200元可用</div>
									<div class="w-y-t-l-t">仅限于XX加油站使用</div>
								</div>
								
								<div class="w-y-top-but">
									<button class="w-y-top-but-but">领取</button>
								</div>	
							</div>
							
							<div class="card-date">
								<div class="card-date-d1">2020.04.11</div>
								<div class="card-date-d2">——</div>
								<div class="card-date-d3">2023.05.11</div>
							</div>
						</div>
					</div>
					<!-- 模块结束 -->
					
					<!-- 模块开始 -->
						<div class="wdyhq-yhqmk">
							<div class="wdyhq-yhqnr">
								<div class="w-y-top">
									<div class="w-y-top-right">
										<div class="w-y-t-r-l">￥</div>
										<div class="w-y-t-r-r">20</div>
									</div>
									
									<div class="w-y-top-left">
										<div class="w-y-t-l-u">满200元可用</div>
										<div class="w-y-t-l-t">仅限于XX加油站使用</div>
									</div>
									
									<div class="w-y-top-but">
										<button class="w-y-top-but-but" style="background-color: #D9D9D9;">已领取</button>
									</div>	
								</div>
								
								<div class="card-date">
									<div class="card-date-d1">2020.04.11</div>
									<div class="card-date-d2">——</div>
									<div class="card-date-d3">2023.05.11</div>
								</div>
							</div>
						</div>
						<!-- 模块结束 -->
					
				</uni-card>
				
				
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			tzdsyq() {
				uni.navigateTo({
					url: "/pages/my/wdyhq/wdyhq"
				})
			},
			tzysyq() {
				uni.navigateTo({
					url: "/pages/my/wdyhq/yhqdlq/yhqdlq"
				})
			},
			tzygqq() {
				uni.navigateTo({
					url: "/pages/my/wdyhq/yhqygq/yhqygq"
				})
			},
		}
	}
</script>

<style>
	.top {
		width: 750rpx;
		height: 400rpx;
		background-color: #3183FC;
		/* 	overflow: hidden; */
		/* 	background-image: url(@/static/wdimg/aaa.jpg); */
		position: relative;
	}

	.xxxg {
		position: absolute;
		width: 750rpx;

	}

	.xxxg-card {
		/* 		height: 500rpx; */
		/* 	width: 750rpx; */
		border-radius: 25rpx;
	}

	.wdyhq-dh {
		width: 100%;
		color: white;
		display: flex;
		justify-content: space-around;
		font-size: 35rpx;
		margin-bottom: 30rpx;
	}

	.wdyhq-yhqmk {
		margin-top: 30rpx;
		width: 100%;
		margin-bottom: 20rpx;
	}

	.wdyhq-yhqnr {
		margin-top: 20rpx;
		background-image: url(/static/wdimg/q1.png);
		width: 100%;
		height: 210rpx;
		background-size: 100%;
		color: white;
	}


	.w-y-top {
		display: flex;
		justify-content: space-between;
	/* 	background-color: red; */
		/* background-color: red; */
		height: 70%;

	}

	.w-y-top-left {
	width: 40%;
/* 	background-color: blue; */
	}
	
	.w-y-top-but{
		width: 30%;
/* s */
	}

	.w-y-top-right {
		margin-top: 30rpx;
		width: 30%;
		/* 	background-color: blue; */
		display: flex;
		justify-content: center;
	}
	
	.w-y-top-but-but{
		border-radius: 100rpx;
		color: white;
		background-color:#FF875B;
		font-size: 30rpx;
		width: 160rpx;
		margin-top: 60rpx;
	}

	.w-y-t-l-t {
		font-size: 25rpx;
		color: black;
		margin-left: 10rpx;
	}

	.w-y-t-l-u {
		margin-top: 30rpx;
		font-size: 35rpx;
		font-weight: bold;
		margin-left: 10rpx;
		color: #FF875B;
	}

	.w-y-t-r-l {
		/* margin-left: 100rpx; */
		margin-top: 70rpx;
		font-size: 25rpx;

	}

	.w-y-t-r-r {
		margin-top: 50rpx;
		font-size: 80rpx;
		font-weight: bold;
	}

	.w-y-und {
		display: flex;
		justify-content: space-between;
		height: 30%;
		width: 100%;
		border-top: 1px dashed white;
		align-items: center;
	}

	.w-y-und-t {
		font-size: 20rpx;
		margin-left: 20rpx;
	}

	.w-y-und-u {
		font-size: 25rpx;
		margin-right: 20rpx;
	}
	
	
	.card-date{
	/* 	background-color: red; */
		height: 30%;
		display: flex;
		justify-content: center;
		color: #A9A5A2;	
		font-size: 24rpx;
	}
	
	.card-date-d1{
		margin-left: 60rpx;
	}
	
</style>